<template>
    <div class="category">
        <div @click="toSearch(item.link,item.title)"
            v-for="(item, index) in CategoryData"
            :key="index"
            :style=" 'width:'+ 100 / num+'%;' "
        >
            <div>
                <img v-preload=" item.image " alt />
            </div>
            <div>{{item.title}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        num: {
            type: Number,
            default() {
                return 5;
            }
        },
        CategoryData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    methods: {
        toSearch(link,Title){
            //根据link中是否携带fcid和title进行取值
            //有就截取，没有就以根据关键字item.title的值查询
            let params = {};
            let fcid = link.match(/fcid=(\d+)/);
            if(fcid){
                params.fcid = fcid[1];
            }
            let title = link.match(/title=([^&]+)/);
            if(title){
                params.title = decodeURI(title[1]);
            }else{
                params.title = decodeURI(Title);
            }
            this.$router.push({
                name:"search",
                query:params
            });
        }
    },
};
</script>

<style lang="less" scoped>
.category {
    // overflow: hidden;
    @size: 10px;
    display: flex;
    flex-flow: row wrap;
    padding: 0 @size;
    > div {
        text-align: center;
        box-sizing: border-box;
        padding: 0 @size;
        margin-top: 20px;
        // width: 100% / 5;
        > div:first-child {
            width: 100%;
            padding-top: 100%;
            height: 0px;
            position: relative;
            background-color: @cc;
            border-radius: 50%;
            img {
                width: 100%;
                // height: 100%;
                vertical-align: top;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        > div:last-child {
            font-size: 29px;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>